<template>
  <div class="home">
     <!-- <h1>首页</h1> -->
     <el-container class="container">
      <!--头部-->
  <el-header>
    <div class="header_div">
      <img src="../assets/logo2.jpg" alt="">
      <div>
         <el-button type="primary">消息</el-button>
         <el-button type="success">设置</el-button>
         <el-button type="info">安全退出</el-button>
      </div>
    </div>
  </el-header>
  <el-container>
    <el-aside width="200px">

<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item-group>
      <span slot="title">分组一</span>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">选项4</span>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>

    </el-aside>
    <el-main>
<!--主体-->
<table class="table table-hover"> 
    <tr class="table_tr">
        <td>姓名</td>
        <td>学名</td>
        <td>手机名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>专业</td>
        <td>操作</td>
    </tr>
    <tr class="table_tr1">
      <td>博肖</td>
      <td>博肖</td>
      <td>博肖</td>
      <td>博肖</td>
      <td>博肖</td>
      <td>博肖</td>
      <td>
        <button class="btn btn-default" type="submit">编辑</button>
        <button class="btn btn-default" type="submit">删除</button>
      </td>
    </tr>
</table>

    </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Home',
  data() {
      return {
        
      }
    }
  
}
</script>
<style lang="scss" scoped>
    .home{
      height: 100%;
     
    .container{
      height: 100%;
      .header_div{
        display: flex;
        justify-content: space-between;
        height: 100%;
        align-items: center;
        button{
          width: 100px;
          background: #83B6D5;
        }
      }
    }
      .el-header{
    background-color: #0097DA;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 50px 100px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    height: 100%;
    color: #333;
    text-align: center;
    line-height: 10px;
    .table_tr1{
      padding: 0px;
      margin: 0px;
    }
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  
    
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
    }
    

</style>